/**
 * Created by wkj on 2017/11/20.
 */
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, TouchableHighlight } from 'react-native';
import { MtChar, MtCheckItem, MtColor } from 'martian-ui';
const { MtM1, MtT3 } = MtChar;

class TipBar extends Component {
    render() {
        const { title, tips, containerStyle, titleStyle, style } = this.props;
        const tipView = tips && tips.map(
                (ele, index) => (
                    <MtT3 key={index} style={[{ lineHeight: 20 }, style]}>
                        {`${index + 1}、`}{ele}
                    </MtT3>
                )
            );
        return (
            <View style={[styles.headContainer, containerStyle]}>
                {!!title && <MtM1 style={[{ flex: 1, fontWeight: 'bold', marginBottom: 15 }, titleStyle]}>
                    {title}
                </MtM1>}
                {tipView}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    headContainer: {
        flexDirection: 'column',
        padding: 15,
        backgroundColor: '#FFF0E9',
    },
});

module.exports = TipBar;
